<template>
  <div class="container">
    <h2>纯vue实现</h2>
    <CountView />
    <hr>
    <h2>vuex实现1</h2>
    <UseVuex1 />
    <hr>
    <h2>vuex实现2 - mapState, mapGetters, mapActions, mapMutations</h2>
    <UseVuex2 />
    <hr>
    <h2>人员列表</h2>
    <PersonView />
  </div>
</template>

<script>
import CountView from './components/CountView.vue'
import UseVuex1 from './components/UseVuex1.vue'
import UseVuex2 from './components/UseVuex2.vue'
import PersonView from './components/PersonView.vue'

export default {
  name: 'App',
  components: {
    CountView,
    UseVuex1,
    UseVuex2,
    PersonView
  }
}
</script>

<style lang="less">
  h1 {
    text-align: center;
  }
</style>